<template>
  <div class="calendar">
    <p class="title">
      <img src="/static/images/icon/icon_calendar.png">
      <span>{{$t("schoolCalendar._")}}</span>
    </p>
    <div class="calendar-content">
      <p class="scholl-calendar" v-if="calendarInfoObj">
        <span>{{calendarInfoObj.simpleName}}</span>
        <span class="blue">{{calendarInfoObj.whichWeek}}</span>
      </p>
      <div class="calendar-body">
        <ul class="week">
          <li class="week_item">
            <span>{{$t("schoolCalendar.sunday")}}</span>
          </li>
          <li class="week_item">
            <span>{{$t("schoolCalendar.monday")}}</span>
          </li>
          <li class="week_item">
            <span>{{$t("schoolCalendar.tuesday")}}</span>
          </li>
          <li class="week_item">
            <span>{{$t("schoolCalendar.wednesday")}}</span>
          </li>
          <li class="week_item">
            <span>{{$t("schoolCalendar.thursday")}}</span>
          </li>
          <li class="week_item">
            <span>{{$t("schoolCalendar.friday")}}</span>
          </li>
          <li class="week_item">
            <span>{{$t("schoolCalendar.saturday")}}</span>
          </li>
        </ul>
        <ul class="days" :class="{'days-height': isAdaptive}">
          <li v-for="day in days">
            <div class="day-style">
              <span
                v-if="day.getMonth() + 1 != currentMonth"
                class="other-month"
              >{{ day.getDate() }}</span>
              <span v-else>
                <span
                  v-if="day.getFullYear() == new Date().getFullYear() && day.getMonth() == new Date().getMonth() && day.getDate() == new Date().getDate()"
                  class="today"
                >{{ day.getDate() }}</span>
                <span v-else>{{ day.getDate() }}</span>
              </span>
            </div>
          </li>
          <li class="clear-both"></li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import utils from "common/src/utils/utils";

export default {
  name: "calendar",
  props: {
    calendarInfoObj: {
      type: Object,
      default: null
    },
    isAdaptive: {
      type: Boolean
    }
  },
  data() {
    return {
      currentDay: 1,
      currentWeek: 1,
      days: [],
      todayDate: "",
      PageLastMonthDay: 0,
      PagelastMonth: 0,
      PagenextMonth: 0,
      month_olympic: [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
      month_normal: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
    };
  },
  created() {
    this.showCalendar(null);
    // 处理展示字段
    let week = this.calendarInfoObj.week;
    if (week)
      this.calendarInfoObj.whichWeek = utils.i18nReplace(
        this.$t("schoolCalendar.whichWeek"),
        { week }
      );
  },
  methods: {
    showCalendar(cur) {
      var date = new Date();
      this.days = [];
      this.currentDay = date.getDate();
      this.currentYear = date.getFullYear();
      this.currentMonth = date.getMonth() + 1;
      this.currentWeek = date.getDay();
      var strDate = this.returnDateStr(
        this.currentYear,
        this.currentMonth,
        this.currentDay
      );
      var totalDay = this.daysMonth(this.currentMonth, this.currentYear);
      var firstDay = this.dayStart(this.currentMonth, this.currentYear);
      if (this.currentMonth == 1) {
        this.PageLastMonthDay = this.daysMonth(12, this.currentYear - 1);
        this.PagelastMonth = 12;
        this.PagenextMonth = 2;
        var PageLastYear = this.currentYear - 1;
        var PageNextYear = this.currentYear;
      } else if (this.currentMonth == 12) {
        this.PageLastMonthDay = this.daysMonth(11, this.currentYear + 1);
        this.PagelastMonth = 11;
        this.PagenextMonth = 1;
        var PageLastYear = this.currentYear;
        var PageNextYear = this.currentYear + 1;
      } else {
        this.PageLastMonthDay = this.daysMonth(
          this.currentMonth - 1,
          this.currentYear
        );
        this.PagelastMonth = this.currentMonth - 1;
        this.PagenextMonth = this.currentMonth + 1;
        var PageLastYear = this.currentYear;
        var PageNextYear = this.currentYear;
      }
      var begin = this.PageLastMonthDay - firstDay + 1;
      for (var i = 0; i < firstDay; i++) {
        var d = new Date(PageLastYear + "/" + this.PagelastMonth + "/" + begin);
        begin++;
        this.days.push(d);
      }
      for (var i = 1; i <= totalDay; i++) {
        var d = new Date(this.currentYear + "/" + this.currentMonth + "/" + i);
        this.days.push(d);
      }
      var count = firstDay + totalDay;
      for (var i = 1; i <= 42 - count; i++) {
        var d = new Date(PageNextYear + "/" + this.PagenextMonth + "/" + i);
        this.days.push(d);
      }
      this.todayDate = this.returnDateStr(
        new Date().getFullYear(),
        new Date().getMonth() + 1,
        new Date().getDate()
      );
    },
    dayStart(month, year) {
      var tmpDate = new Date(year + "/" + month + "/" + 1);
      return tmpDate.getDay();
    },
    daysMonth(month, year) {
      var tmp = year % 4;
      if (tmp == 0) {
        return this.month_olympic[month - 1];
      } else {
        return this.month_normal[month - 1];
      }
    },
    returnDateStr(year, month, day) {
      month = month < 9 ? "0" + month : "" + month;
      day = day < 9 ? `0{${day}}` : "" + day;
      return year + "-" + month + "-" + day;
    }
  }
};
</script>
<style lang="scss" scoped>
.calendar {
  height: 100%;
  overflow: hidden;
  .title {
    font-size: 18px;
    color: #2b3b4e;
    letter-spacing: 0;
    line-height: 24px;
    margin-bottom: 4px;
    font-weight: bolder;
    img {
      width: 24px;
      height: 24px;
      vertical-align: middle;
      margin-right: 8px;
    }
    span {
      vertical-align: middle;
    }
  }
  ul {
    margin: 0;
    padding: 0;
  }
  ul li {
    list-style: none;
    display: inline-block;
  }
  .calendar-content {
    font-size: 12px;
    color: #4c5c70;
    width: 100%;
    height: calc(100% - 28px);
    .scholl-calendar {
      font-size: 14px;
      color: #4c5c70;
      padding-left: 6px;
      margin: 16px 0 8px;
      .blue {
        color: #3a7fe8;
      }
    }
    .calendar-body {
      width: 100%;
      height: calc(100% - 38px);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      .week {
        padding-left: 0px;
        height: calc(100% / 6);
        flex: 1;
        display: flex;
        align-items: center;
        .week_item {
          display: inline-block;
          text-align: center;
          color: #4c5c70;
          // 兼容ie计算时保留两位四舍五入
          margin-right: calc((100% - 24px * 7) / 6 - 0.1px);
          &:last-child {
            margin-right: 0;
          }
          span {
            display: inline-block;
            text-align: center;
            width: 24px;
            height: 24px;
            line-height: 24px;
            margin-top: calc((100% - 24px) / 2);
          }
        }
      }
      .days {
        flex: 6;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        overflow: hidden;
        li {
          height: calc(100% / 6);
          // 兼容ie计算时保留两位四舍五入
          margin-right: calc((100% - 24px * 7) / 6 - 0.1px);
          text-align: center;
          align-items: center;
          &:nth-child(7),
          &:nth-child(14),
          &:nth-child(21),
          &:nth-child(28),
          &:nth-child(35),
          &:nth-child(42) {
            margin-right: 0;
          }
          .day-style {
            display: inline-block;
            cursor: default;
            width: 24px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            color: #4c5c70;
            margin: auto;
            .today {
              background-color: #3a7fe8;
              color: #fff;
              width: 24px;
              height: 24px;
              border-radius: 50%;
              display: inline-block;
            }
            .other-month {
              color: #bec7d1;
            }
          }
        }
      }
    }
  }
}
</style>
